// "支付方式" 页面

import React, { Component } from 'react'
import pxPage from '../../../root/pxPage'
import { ImagePicker } from 'antd-mobile';
import { getMsg, errToast } from '../../../redux/actionCreator'
import { modifypaybus } from '../../../redux/actionCreator/modifybusiness'
import { withRouter } from "react-router-dom"
import { connect } from 'react-redux'

const deviceHight = document.documentElement.clientHeight

class Accountman_bus extends Component {
    constructor(props) {
        super(props);

        let modify = getMsg(this.props)
        // console.log(modify)
        const data = [{
            url: `http://www.h5weixin.club:1025/api/image/${modify.business_qrcode}`,
        }];

        this.state = {
            Files1: data,
            multiple: false,
            business_id: modify.business_id,
            business_password: '',
            // business_address:modify.business_address ,
        }
        this.onChange = this.onChange.bind(this)
        this.handleChangepassword = this.handleChangepassword.bind(this)
        // this.handleChangesign = this.handleChangesign.bind(this)
    }

    onChange = (Files1) => {
        this.setState({ Files1, });
    }
   
    handleChangepassword = (e) => {
        this.setState({ business_password: e.target.value })
    }
    // handleChangesign = (e) => {
    //     this.setState({ business_address: e.target.value })
    // }
    render() {
        const { Files1 } = this.state;
        let modify = getMsg(this.props)
        // console.log(modify)
        return (
            <div style={{ minHeight: '100vh', display: 'flex', width: '100%' }}>

                <div style={{ backgroundColor: "#080904", minHeight: '100vh', display: 'flex', width: '100%' }}>

                    <div style={{ width: '90%', margin: '0 auto' }}>
                        <div style={{ height: '20px' }}></div>
                        <i className="iconfont icon-fanhui" style={{ fontSize: '1.7em' }} onClick={() => this.props.history.goBack()}></i>
                        <div style={{ fontSize: '1.5em', fontWeight: 'bold', paddingTop: '25px', paddingBottom: '20px' }}>账户管理</div>
                        <div style={accountman_addspdiv}>
                            <div className='addsp-div-div' style={accountman_addspdivdiv}>
                                <div style={accountman_addspdivone}>修改支付方式</div>
                                <div style={accountman_addspdivtwo}>输入密码确认</div>

                                <ImagePicker
                                    files={Files1}
                                    style={accountman_addspimg}
                                    onChange={this.onChange}
                                    selectable={Files1.length < 1}
                                    multiple={this.state.multiple}
                                    length='1'
                                />

                                <input
                                    className='addsp-form-input-one'
                                    style={accountman_addspinputone}
                                    placeholder='输入密码'
                                    type='password'
                                    value={this.state.business_password}
                                    onChange={this.handleChangepassword}
                                ></input>

                            </div>
                            <div className='addsp-div-div-two' style={accountman_addspdivdivtwo}>
                                <div
                                    style={accountman_addspdivdivtwoi}
                                    onClick={() => {
                                        console.log(this.state)
                                        
                                        this.props.dispatch(
                                            modifypaybus(getMsg(this.props).business_id,
                                                // this.state.business_name,
                                                this.state.business_password,
                                                this.state.Files1,
                                                this.props
                                            ))

                                    }}
                                >
                                    <i style={{ fontSize: pxPage(44) }} className='iconfont icon-duigou'></i>
                                </div>
                                <div
                                    style={accountman_addspdivdivtwoii}
                                    onClick={() => {
                                        this.props.history.goBack()

                                    }}
                                >
                                    <i style={{ fontSize: pxPage(44) }} className='iconfont icon-cancel'></i>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <div style={{ flex: '1' }}></div>
            </div>
        )
    }
}
const mapStateToProps = (state) => ({
    login: state.login,
})
export default withRouter(connect(mapStateToProps)(Accountman_bus))

const accountman_addspdiv = {
    width: '100%',
    paddingTop: pxPage(15),
    borderTop: '1px solid #fff'
}
const accountman_addspdivdiv = {
    height: `${deviceHight - 350}px`,
    backgroundColor: 'rgb(212, 118, 102)'
}
const accountman_addspdivdivtwo = {
    width: '100%',
    position: 'relative',
    backgroundColor: 'black'
}
const accountman_addspdivdivtwoi = {
    position: 'absolute',
    left: pxPage(64),
    top: pxPage(15),
    fontSize: pxPage(44)
}
const accountman_addspdivdivtwoii = {
    position: 'absolute',
    right: pxPage(64),
    top: pxPage(15),
    fontSize: pxPage(44)
}

// 输入框样式
// 修改名字
const accountman_addspinputone = {
    width: pxPage(170),
    height: pxPage(30),
    position: 'absolute',
    right: pxPage(30),
    top: pxPage(330),
    padding: pxPage(8),
    borderRadius: pxPage(10)
}
//修改个性签名
const accountman_addspinputtwo = {
    width: pxPage(170),
    height: pxPage(30),
    position: 'absolute',
    right: pxPage(30),
    top: pxPage(395),
    padding: pxPage(8),
    borderRadius: pxPage(10)
}

const accountman_addspimg = {
    width: pxPage(160),
    height: pxPage(140),
    position: 'absolute',
    right: pxPage(35),
    top: pxPage(155),
    borderRadius: '10px',
    objectFit: 'cover'
}

// 左侧文本
const accountman_addspdivone = {
    width: pxPage(160),
    height: pxPage(30),
    position: 'absolute',
    left: pxPage(40),
    top: pxPage(170),
    fontSize: pxPage(15)
}
const accountman_addspdivtwo = {
    width: pxPage(160),
    height: pxPage(30),
    position: 'absolute',
    left: pxPage(40),
    top: pxPage(350),
    fontSize: pxPage(15)
}
const accountman_addspdivthree = {
    width: pxPage(160),
    height: pxPage(30),
    position: 'absolute',
    left: pxPage(40),
    top: pxPage(415),
    fontSize: pxPage(15)
}
